<template>
  <div class="el-container" v-loading="pageLoading">
    <!--    表单设计器-->
    <fc-designer ref="designer">
      <template slot="handle">
        <ElButton
          class="el-button el-button--primary el-button--mini is-plain is-round"
          @click="getForm"
          ><i class="el-icon-check"></i> 完成</ElButton
        >
      </template>
    </fc-designer>
  </div>
</template>

<script>
import NameWra from '@/components/form-components/NameWra'
import GenWra from '@/components/form-components/GenWra'
import BirWra from '@/components/form-components/BirWra'
import AgeWra from '@/components/form-components/AgeWra.js'
import TelWra from '@/components/form-components/TelWra'
import QQWra from '@/components/form-components/QQWra'
import EmaWra from '@/components/form-components/EmaWra'
import PasWra from '@/components/form-components/PasWra'
import JobWra from '@/components/form-components/JobWra'
import SchWra from '@/components/form-components/SchWra'
import XiWra from '@/components/form-components/XiWra'
import ClaWra from '@/components/form-components/ClaWra'
import NumWra from '@/components/form-components/NumWra'
import DegWra from '@/components/form-components/DegWrap'
import MajWra from '@/components/form-components/MajWra'
import { findFormJsonOne, editFormJsonOne } from '@/api/form'
export default {
  name: "designForm",
  data() {
    return {
      fid: this.$route.query.fid,
      formJson: {},
      editForm: {
        fid: null,
        formInfo: {}
      },
      pageLoading: false
    }
  },
  async mounted() {
    //加载json数据
    const { data } = await findFormJsonOne(this.fid)
    // 设置问卷
    this.$refs.designer.setRule(data.data)
    // 添加配置
    this.$refs.designer.addComponent(NameWra)
    this.$refs.designer.addComponent(GenWra)
    this.$refs.designer.addComponent(BirWra)
    this.$refs.designer.addComponent(AgeWra)
    this.$refs.designer.addComponent(TelWra)
    this.$refs.designer.addComponent(QQWra)
    this.$refs.designer.addComponent(EmaWra)
    this.$refs.designer.addComponent(PasWra)
    this.$refs.designer.addComponent(JobWra)
    this.$refs.designer.addComponent(SchWra)
    this.$refs.designer.addComponent(XiWra)
    this.$refs.designer.addComponent(ClaWra)
    this.$refs.designer.addComponent(NumWra)
    this.$refs.designer.addComponent(MajWra)
    this.$refs.designer.addComponent(DegWra)
    this.$refs.designer.addMenu({
      title: '常用问题',
      name: 'group1',
      list: [{
        icon: NameWra.icon,
        name: NameWra.name,
        label: NameWra.label
      },
      {
        icon: GenWra.icon,
        name: GenWra.name,
        label: GenWra.label
      },
      {
        icon: BirWra.icon,
        name: BirWra.name,
        label: BirWra.label
      },
      {
        icon: AgeWra.icon,
        name: AgeWra.name,
        label: AgeWra.label
      },
      {
        icon: TelWra.icon,
        name: TelWra.name,
        label: TelWra.label
      },
      {
        icon: QQWra.icon,
        name: QQWra.name,
        label: QQWra.label
      },
      {
        icon: EmaWra.icon,
        name: EmaWra.name,
        label: EmaWra.label
      },
      {
        icon: PasWra.icon,
        name: PasWra.name,
        label: PasWra.label
      },
      {
        icon: JobWra.icon,
        name: JobWra.name,
        label: JobWra.label
      },
      {
        icon: SchWra.icon,
        name: SchWra.name,
        label: SchWra.label
      },
      {
        icon: XiWra.icon,
        name: XiWra.name,
        label: XiWra.label
      },
      {
        icon: ClaWra.icon,
        name: ClaWra.name,
        label: ClaWra.label
      },
      {
        icon: NumWra.icon,
        name: NumWra.name,
        label: NumWra.label
      },
      {
        icon: DegWra.icon,
        name: DegWra.name,
        label: DegWra.label
      },
      {
        icon: MajWra.icon,
        name: MajWra.name,
        label: MajWra.label
      }
      ]
    });
  },
  methods: {
    async getForm() {
      // 获得问卷json
      this.pageLoading = true
      const FcDesignerRule = this.$refs.designer.getRule();
      this.formJson = FcDesignerRule
      this.editForm.fid = this.fid
      this.editForm.formInfo = this.formJson
      const { data } = await editFormJsonOne(this.editForm)
      console.log(data);
      this.pageLoading = false
      this.$message.success('修改成功')
      await this.$router.replace('/form/my')
    },
  }
}
</script>

<style scoped>
</style>
